<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    input {
      display: block;
    }
  </style>
</head>

<body>
  <!-- 
      3种方式
      1 使用jquery内置
      2 使用第三方js库  form-serialize 
      3 formdata
     -->
  <form>
    <input type="text" value="111" name="username1" />
    <input type="text" value="222" name="username2" />
    <input type="text" value="333" name="username3" />
    <input type="text" value="444" name="username4" />
    <input type="text" value="555" name="username5" />
    <input type="text" value="666" name="username6" />
    <input type="text" value="777" name="username7" />
    <input type="text" value="888" name="username8" />
    <input type="text" value="999" name="username9" />
    <input type="text" value="000" name="username10" />
    <button>提交</button>
  </form>
  <script src="../assets/lib/jquery-3.6.0.min.js"></script>
  <!-- <script src="./form-serialize.js"></script> -->
  <script>
    const form = document.querySelector("form")
    form.addEventListener("submit", function (e) {
      e.preventDefault()
      // 1 使用jq的方式来获取
      // const jqForm = $(form).serialize() // a=1&b=2
      // console.log(jqForm)

      // 2 form-serialize
      // const str = serialize(form); // 返回字符串
      // const obj = serialize(form, { hash: true }); // 返回对象
      // console.log(obj);

      // 3 formdata  特殊构造函数 对应 实例 特殊，无法直接 .语法来访问里面的数据 form.get()
      const formData = new FormData(form)
      console.log(formData.get(form))
      // 格式处理！！
      // 自己遍历
      let list = []
      const obj = {}
      formData.forEach((val, key) => {
        list.push(`${key}=${val}`)
        obj[key] = val
      })
      console.log(list.join("&"))
      console.log(obj)

      // 4 演示快速给form表单赋值
      //   const obj = {
      //     username1: "username1username1",
      //     username2: "username2username2",
      //     username3: "username3username3",
      //     username4: "username4username4",
      //     username5: "username5username5",
      //     username6: "username6username6",
      //     username7: "username7username7",
      //     username8: "username8username8",
      //     username9: "username9username9",
      //     username10: "username10username10",
      //   }
      //   for (const key in obj) {
      //     document.querySelector(`input[name=${key}]`).value = obj[key]
      //   }
    })


  </script>
</body>

</html>